<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--1.抽取头部公用部分-->
<!--定义fragment  导航栏-->
<head th:fragment="header-commo(title)">

    <meta charset="utf-8">
    <!--声明文档兼容模式，表示使用IE浏览器的最新模式-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--设置视口的宽度(值为设备的理想宽度)，页面初始缩放值<理想宽度/可见宽度>-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title  th:text="'酷玩周边商城-'+${title}">酷玩周边商城</title>
    <!-- 引入Bootstrap核心样式文件 -->
    <link href="./css/bootstrap.min.css" rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <link rel="stylesheet" href="css/base.css" th:href="@{/css/base.css}"/>
    <link rel="shortcut icon"  th:href="@{/img/favicon.ico}"/>
    <!-- 引入jQuery核心js文件 -->
    <script src="/js/jquery-1.11.3.min.js" th:href="@{/js/jquery-1.11.3.min.js}"></script>
    <!-- 引入BootStrap核心js文件 -->
    <script src="/js/bootstrap.min.js" th:href="@{/js/bootstrap.min.js}"></script>

    <style type="text/css">
        #div01 {
            position: relative;
            width: 100%;
            height: 400%;
            border: 1px solid #121010;
            padding-bottom: 20px;
            z-index: 1;
            /*display:none;*/

        }
    </style>


    <!--jQuery 代码-->
    <!--
        在jQuery中写thymeleaf 代码 需要在script标签中添加 th:inline="javascript" 语法
    -->
    <script th:inline="javascript">
        $(function(){
            //1.使用thymeleaf语法动态获取虚拟路径名称
            var basePath = [[${#request.contextPath}]];
            //2.调用post的方法
            /*
            jQuery.post(url, [data], [callback], [type])
              url:发送请求地址。
              data:待发送 Key/value 参数。
              callback:发送成功时回调函数。
              type:返回内容格式，xml, html, script, json, text, _default。

            */

            $.post(
                // 2.1 拼接 请求的地址
                basePath + "/selectAllByStatus",
                //2.2 获取后台传递的 json格式的数据
                function (data) {
                    //打印data数据（json数据）
                    console.log(data);
                    //定义一个变量保存html字符串
                    str = ""
                    //for in 循环遍历 后台传递的数据
                    for (var i in data ) {
                        //遍历data数据
                        //alert(data[i].name)
                        //将后台传递的数据与前台代码拼接 注意拼接技巧....
                        str += "<li> <a href='"+basePath+"/item/selectByCid/"+data[i].cid +"/1'>"+ data[i].name +"</a> </li>"
                    }
                    //打印str
                    // console.log(str)
                    //2.3 获取存放分类的信息ul， 并使用html() 将str放入 覆盖原来的内容
                    $(".wz-nav").html(str);

                }
            )
            // 使用ajax()方法获取用户输入的值
            $("#js-submit").keyup(function () {
               //1.获取用户输入的值
               var $word = $(this).val();
               //console.log($word);
               if ( $word=="" ){
                $("#div01").hide()
               }else {
                   $.ajax({
                       type: "post",
                       url: "/item/selectLikeName",
                       data:{
                            //发送的数据
                           $word : $word
                       },
                       success:function(data , status){
                           // $("#div01").show().html(data)
                           console.log(data)
                       }
                   });
               }
            });
            $


        });
    </script>
</head>
<body>

<!--定义fragment 搜索栏 -->
<header th:fragment="header-nav">
    <div class="container-fluid wz-notice">
        <div class="container">
            <li class="icon-notice"></li>
            <span>酷玩周边商城手办热销中！，点击 <a href="#">查看详情</a> </span>
        </div>
    </div>
    <nav class="container-fluid wz-info">
        <div class="container">
            <div class="row">
                <div class="col-md-4 col-xs-6">
                    <a class="icon-wzry pull-left" href="#">王者荣耀</a>
                    <div class="fl ico-comm i-solgan">可以触摸的欢乐时光</div>
                </div>
                <div class="col-md-4 hidden-xs">
                    <div class="search-box">
                        <input id="js-submit" type="text" class="pull-left" placeholder="请输入想要找的宝贝" />
                        <button type="submit" class="pull-left">搜索</button>
                        <div id="div01" th:each=" shop :${shopName}  ">
                            <p th:text="${shop}"></p>
                        </div>
                    </div>

                </div>

                <div class="col-md-4 col-xs-6" style="margin-top: 40px;">
                    <ul class="list-inline text-right ">
                        <!--当session域为空时显示 此li-->
                        <li th:if="${session.user==null}">
                            <a class="font1" th:href="@{/login}" href=""><span class="glyphicon glyphicon-user" aria-hidden="true"></span>&nbsp;登录</a>
                        </li>
                        <!--当session域不为为空时显示 此li-->
                        <li class="dropdown" th:if="${session.user != null}">
                            <span data-toggle="dropdown" class="font1" href="javascript:void(0);">欢迎您：<span th:text="${session.user.name}">王大炮</span> <span
                                    class="caret" ></span></span>
                            <ul class="dropdown-menu">
                                <li><a href="#"><span class="glyphicon glyphicon-list-alt"></span> 订单管理</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a th:href="@{/user/out}" href="#"><span class="glyphicon glyphicon-log-out"></span> 退出登录</a></li>
                            </ul>
                        </li>

                        <li>
                            <a class="font1" href="#" th:href="@{/cart}"><span
                                    class="glyphicon glyphicon-shopping-cart"></span>&nbsp;购物车</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
    <!--导航条-->
    <nav class="navbar navbar-inverse ">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" th:href="@{/}" href="#">商城首页</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class=" nav navbar-nav wz-nav font2">
                    <li>
                        <a href="">分类一</a>
                    </li>
                    <li>
                        <a href="">分类一</a>
                    </li>
                    <li>
                        <a href="">分类一</a>
                    </li>
                    <li>
                        <a href="">分类一</a>
                    </li>
                    <li>
                        <a href="">分类一</a>
                    </li>
                </ul>
                <form class="hidden-md  hidden-lg navbar-right " role="search">
                    <div class="  form-group">
                        <input type="text" class="form-control" placeholder="请搜索商品..">
                    </div>
                    <button type="submit" class="btn btn-default">搜索</button>
                </form>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>
</header>


</body>
</html>